import React from 'react'
import Logo  from '../../logo/logo.js'
import {List,Radio,InputItem,WhiteSpace, WingBlank,Button}  from 'antd-mobile'
import {connect} from 'react-redux'
import {Redirect} from 'react-router-dom'
import {registerMethods} from '../../redux/user.redux'
import imoocForm from '../../components/imooc-form/imooc-form.js'

@connect(
    state=>state.user,
    {registerMethods}
)
@imoocForm
class register extends React.Component{
    constructor(props){
        super(props)
        this.handleRegister=this.handleRegister.bind(this)
    }
    componentDidMount(){
        this.props.handleChange('type',"genius")
    }
    onChange(type){
        this.setState({
            type:type
        })
    }
    handleRegister(){
        this.props.registerMethods(this.props.state)
        
    }
    render(){
        const RadioItem = Radio.RadioItem;

        return (
            <div>
                {this.props.redirectTo?<Redirect to={this.props.redirectTo}/>:null}
                <Logo></Logo>
                
                <WingBlank>
                    <List>
                        {this.props.msg?<p className='error-msg'>{this.props.msg}</p>:null}
                        <InputItem
                            onChange={v=>this.props.handleChange('user',v)}
                        >用户名：</InputItem>
                        <WhiteSpace></WhiteSpace>
                        <InputItem
                            type='password'
                            onChange={v=>this.props.handleChange('pwd',v)}
                        >密码</InputItem>
                        <WhiteSpace></WhiteSpace>
                        <InputItem
                             type='password'
                            onChange={v=>this.props.handleChange('repeatpwd',v)}
                        >确认密码</InputItem>
                        <RadioItem checked={this.props.state.type==='genius'}
                            onChange={() => this.props.handleChange('type','genius')}>牛人</RadioItem>
                        <RadioItem 
                        checked={this.props.state.type==='boss'}
                         onChange={() => this.props.handleChange('type','boss')}>老板</RadioItem>
                        <WhiteSpace></WhiteSpace>
                        <Button type="primary" onClick={this.handleRegister}>注册</Button>
                        
                    </List>
                    
                </WingBlank>
                

            </div>
        )
    }
}

export default register